<template>
  <div>
    <el-tabs v-model="activeTab" @tab-change="fetchCustomizations">
      <el-tab-pane label="未处理" name="unhandled"></el-tab-pane>
      <el-tab-pane label="已处理" name="handled"></el-tab-pane>
    </el-tabs>

    <el-table :data="customizationList" border style="width: 100%">
      <el-table-column prop="contactName" label="联系人" width="120" />
      <el-table-column prop="phoneNumber" label="电话" width="150" />
      <el-table-column prop="analysisRequest" label="分析需求" width="200" />
      <el-table-column prop="urgencyLevel" label="紧急程度" width="120" />
      <el-table-column prop="message" label="留言" width="250" />
      <el-table-column align="left" :label="activeTab=='unhandled'?'提出时间':'处理时间'" width="150">
          <template #default="scope">
            <div v-if="activeTab=='unhandled'">{{ new Date(scope.row.CreatedAt).toLocaleString() }}</div>
            <div v-else>{{ new Date(scope.row.UpdatedAt).toLocaleString() }}</div>
          </template>
        </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <template v-if="activeTab === 'unhandled'">
            <el-button type="success" @click="markAsHandled(scope.row.ID)">
              标记为已处理
            </el-button>
          </template>
          <template v-else>
            <el-button type="warning" @click="markAsUnhandled(scope.row.ID)">
              重新标记为未处理
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getCustomizationsByStatus, markAsHandled } from "@/api/customization";

export default {
  name: "CustomizationManagement",
  data() {
    return {
      activeTab: "unhandled",
      customizationList: [],
    };
  },
  methods: {
    // 根据tab加载定制请求数据
    fetchCustomizations() {
      const isHandled = this.activeTab === "handled";
      getCustomizationsByStatus({ isHandled }).then((response) => {
        if (response.data) {
          this.customizationList = response.data;
        } else {
          this.customizationList = [];
        }
      });
    },
    // 标记为已处理
    markAsHandled(id) {
      console.log("mark as handled", id);
      this.$confirm("确定要标记为已处理吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          markAsHandled({ id, isHandled: true }).then(() => {
            this.fetchCustomizations();
            this.$message.success("已标记为已处理");
          });
        })
        .catch(() => {
          this.$message.info("操作已取消");
        });
    },
    // 重新标记为未处理
    markAsUnhandled(id) {
      this.$confirm("确定要重新标记为未处理吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          markAsHandled({ id, isHandled: false }).then(() => {
            this.fetchCustomizations();
            this.$message.success("已重新标记为未处理");
          });
        })
        .catch(() => {
          this.$message.info("操作已取消");
        });
    },
  },
  mounted() {
    this.fetchCustomizations();
  },
};
</script>
